<template>
	<view class="my-merchant">
		<u-sticky>
			<view class="search-or-add u-flex">
				<u-search placeholder="请输入商户名称" v-model="params.keyword" :showAction="false" @change="searchMerchant()">
				</u-search>
				<view class="add-container" @click="addMerchant()">
					<u-icon name="plus" color="rgb(96,114,255)" size="26rpx"></u-icon>
					<view class="add-merchant">添加商户</view>
				</view>
			</view>
		</u-sticky>
		<view class="body-container" v-if="merchantList.length > 0" v-for="(item,index) in merchantList" :key="index">
			<view class="top">
				<u--image :showLoading="true" :src="`${baseStaticFileUrl}/image/pages-merchant/merchant.png`"
					width="76rpx" height="76rpx"></u--image>
				<view class="name"><text>{{item.merchantShortName}}</text></view>

				<u-tag text="审核中" size="mini" v-if="item.status==merchantStatusEnum.AUDITING_MYBANK" />
				<u-tag text="开通" type="success" size="mini" v-else-if="item.status==merchantStatusEnum.SUCCESS" />
				<u-tag text="拒绝" type="error" size="mini"
					v-else-if="item.status==merchantStatusEnum.FAIL || item.status == merchantStatusEnum.GO_BACK" />
				<u-tag text="禁用" type="warning" size="mini" v-else-if="item.status==merchantStatusEnum.OFF" />
				<u-tag text="平台审核中" size="mini" v-if="item.status==merchantStatusEnum.AUDITING_YIHAO" />
				<u-tag text="渠道人工审核中" size="mini" v-if="item.status==merchantStatusEnum.AUDITING_MYBANK_MAN" />

			</view>
			<view class="middle flex" v-if="item.wechatMerchId">
				<view><text class="bold">微信认证</text>商户号：{{item.wechatMerchId}}</view>
				<view class="copy-text" @click="copy(item.wechatMerchId)">复制</view>
			</view>
			<view class="middle flex" v-if="item.aliMerchId">
				<view><text class="bold">支付宝认证</text>商户号：{{item.aliMerchId}}</view>
				<view class="copy-text" @click="copy(item.aliMerchId)">复制</view>
			</view>
			<view class="middle">
				<view>汇联商户号：{{item.merchantId}}</view>
			</view>
			<view class="lower middle" v-if="item.status==merchantStatusEnum.FAIL || item.status == merchantStatusEnum.GO_BACK" @click="merchantDetails(item)">
				<view class="u-lint-ellipsis-2"><text style="color: rgb(254, 64, 76);">拒接原因</text>：{{item.failReason}}
				</view>
				<view class="details">
					<view class="icon-style">
						<u-icon name="arrow-right" color="rgb(0, 0, 0, 0.7)" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="lower middle" v-else-if="item.status==merchantStatusEnum.OFF" @click="merchantDetails(item)">
				<view class="u-lint-ellipsis-2"><text style="color: rgba(0, 0, 0, 0.5);">禁用原因</text>：{{item.failReason}}
				</view>
				<view class="details">
					<view class="icon-style">
						<u-icon name="arrow-right" color="rgb(0, 0, 0, 0.7)" size="24rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="lower middle" v-else>
				<view>默认支付渠道：{{item.name}}</view>
				<view class="details" @click="merchantDetails(item)" v-if="!fromEditMerchantStorePage()">
					<view>查看详情</view>
					<view class="icon-style">
						<u-icon name="arrow-right" color="rgb(0, 0, 0, 0.7)" size="24rpx"></u-icon>
					</view>
				</view>
				<view v-else>
					<u-button text="选择此商户收款" type="primary" size="mini" :plain="true"
						@click="selectOneMerchantId(item)" v-if="item.status==merchantStatusEnum.SUCCESS" />
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty marginTop="200" text="暂无商户" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<u-loadmore v-else :status="status" height="80rpx" :line="true"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				merchantStatusEnum: this.$merchantStatusEnum,
				merchantList: [],
				status: 'loadmore',
				params: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					type: 1,
				},
				fromPage: '',
			}
		},
		onShow() {
			this.merchantList = [];
			this.merchantListLoad();
		},
		onLoad(options) {
			if (options.fromPage) {
				this.fromPage = options.fromPage;
			}
		},
		onPullDownRefresh() {
			this.overloadData('refresh');
		},
		methods: {
			selectOneMerchantId(data) {
				try {
					let pages = getCurrentPages();
					const prevPage = pages[pages.length - 2];
					// console.log("prevPage", prevPage)
					prevPage.$vm.merchantIdChange(data.merchantId,data.feeValue);
				} catch (e) {
					console.error(e.toString())
				}

				uni.navigateBack({
					delta: 1
				});
			},

			fromEditMerchantStorePage() {
				if (this.fromPage == 'add-merchant-store') {
					return true;
				}
				return false;
			},
			// 点击复制
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
			// 重新刷数据
			overloadData(type) {
				this.params.pageNum = 1;
				this.merchantList = [];
				this.merchantListLoad(type);
			},
			merchantListLoad(type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.$api('merchant.findMerchantListByUserId', this.params).then(res => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
					// console.log(res.data)
					if (res.status == 0) {
						this.loadingType = res.data.list.length === 10 ? 'more' : 'nomore';
						this.merchantList = [...this.merchantList, ...res.data.list]; //合并数组
						if (this.merchantList == 0) {
							var that = this;
							uni.showModal({
								title: '当前尚未注册收款商户，是否前往注册？',
								cancelText: '取消',
								confirmText: '前往',
								showCancel: true,
								success(res) {
									if (res.confirm) {
										that.navAddQualification();
									}
								}
							});
						}
					} else {
						getApp().err("请求不成功：" + res.msg);
					}
				}).catch(() => {
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					uni.hideLoading();
				});
			},

			navAddQualification() {
				let _this = this;

				let userInfo = _this.$store.getters.GET_VALUE("GET_USER_INFO");
				if (!userInfo.username && !userInfo.mobile) {
					uni.navigateTo({
						url: '/pages/complete-user-info/complete-user-info?type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages-qualification/add/settlement-type'
					})
				}
			},

			//搜索
			searchMerchant() {
				this.merchantList = []
				this.merchantListLoad();
			},
			//添加商户
			addMerchant() {
				uni.navigateTo({
					url: '/pages-qualification/list/list'
				})
			},
			//商户详情
			merchantDetails(data) {
				// console.log(data)
				uni.navigateTo({
					url: '/pages-merchant/detail/detail?merchant=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-merchant {
		padding-bottom: 60rpx;

		.copy-text {
			color: #6072FF;
		}

		.search-or-add {
			background-color: white;
			padding: 20rpx 24rpx;
			align-items: center;

			.add-container {
				display: flex;
				align-items: center;
				margin-left: 40rpx;

				.add-merchant {
					color: rgb(96,114,255);
					font-size: $f-sm;
					letter-spacing: 0.25rpx;
				}
			}
		}

		.body-container {
			background-color: white;
			margin: 20rpx 24rpx;
			padding: 20rpx 28rpx 30rpx 28rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.top {
				display: flex;
				align-items: center;

				.name {
					flex: 1;
					color: rgba(0, 0, 0, 0.9);
					font-size: 30rpx;
					letter-spacing: 0.26rpx;
					margin-left: 16rpx;
				}

				.right {
					font-size: $f-sm;
					letter-spacing: 0.26rpx;
				}
			}

			.bold {
				font-weight: bold;
			}

			.flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.middle {
				margin-top: 24rpx;
				color: rgba(0, 0, 0, 0.8);
				font-size: $f-sm;
				letter-spacing: 0.26rpx;
			}

			.lower {
				display: flex;
				justify-content: space-between;

				.details {
					display: flex;

					.icon-style {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>
